<template>
  <div>
    <p>
      <!--  刷新按钮  -->
      <button class="btn btn-white btn-default btn-round" @click="list(1)">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button> &nbsp;

      <!--  新增按钮  -->
      <button class="btn btn-white btn-default btn-round" @click="add()">
        <i class="ace-icon fa fa-edit"></i>
        新增
      </button>
    </p>

    <!--  增加分页组件  -->
    <pagination ref="pagination" v-bind:list="list"></pagination>

    <!-- PAGE CONTENT BEGINS -->
    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
      <tr><#list fieldList as field>
          <#if field.nameHump != "createdAt" && field.nameHump != "updatedAt">
        <th>${field.nameCn}</th>
          </#if>
        </#list>
        <th>操作</th>

      </tr>
      </thead>

      <tbody>
      <tr v-for="${domain} in ${domain}s">
        <#list fieldList as field>
          <#if field.nameHump != "createdAt" && field.nameHump != "updatedAt">
            <#if field.enums>
        <td>{{ ${field.enumsConst} | optionKV(${domain}.${field.nameHump})}}</td>
            <#else>
        <td>{{ ${domain}.${field.nameHump} }}</td>
            </#if>
          </#if>
        </#list>
      <td>
        <div class="hidden-sm hidden-xs btn-group">

          <button class="btn btn-xs btn-info" @click="edit(${domain})">
            <i class="ace-icon fa fa-pencil bigger-120"></i>
            编辑
          </button>

          <button class="btn btn-xs btn-danger" @click="del(${domain}.id)">
            <i class="ace-icon fa fa-trash-o bigger-120"></i>
            删除
          </button>

        </div>
      </td>
      </tr>
      </tbody>
    </table>

    <!--  模态框  -->
    <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">新增${tableNameCn}</h4>
          </div>
          <!--  模态框主体内容  -->
          <div class="modal-body">

            <!--  模态框中的表单  -->
            <form class="form-horizontal">
              <#list fieldList as field>
                <#if field.name != "id" && field.nameHump != "createdAt" && field.nameHump != "updatedAt">
                  <#if field.enums>
                    <div class="form-group">
                      <label class="col-sm-2 control-label">${field.nameCn}</label>
                      <div class="col-sm-10">
                        <select v-model="${domain}.${field.nameHump}" class="form-control">
                          <option v-for="o in ${field.enumsConst}" v-bind:value="o.key">{{ o.value }}</option>
                        </select>
                      </div>
                    </div>
                  <#else>
                    <div class="form-group">
                      <label class="col-sm-2 control-label">${field.nameCn}</label>
                      <div class="col-sm-10">
                        <input type="text" v-model="${domain}.${field.nameHump}" class="form-control">
                      </div>
                    </div>
                  </#if>
                </#if>
              </#list>
            </form>
          </div>

          <!--  模态框底部内容  -->
          <div class="modal-footer">
            <!--  data-dismiss的作用为关闭模态框的事件  -->
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" @click="save()">保存</button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- PAGE CONTENT ENDS -->

  </div>


</template>

<script>
import Pagination from "../../components/pagination"

export default {
  name: "${module}-${domain}",
  components: {Pagination},
  mounted: function () {
    let _this = this;
    _this.list(1);
    // 初始化每页显示10条数据
    _this.$refs.pagination.size = 10;
  },
  data: function () {
    return {
    // 用来映射表单的数据
    ${domain}: {},
    ${domain}s: [],
    <#list fieldList as field>
        <#if field.enums>
    ${field.enumsConst}: ${field.enumsConst},
        </#if>
    </#list>
    }
  },
  methods: {
    list(page) {
      let _this = this;
      // 调用显示延迟框的方法
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/${module}/admin/${domain}/list', {
        page: page,
        size: _this.$refs.pagination.size
      }).then((result) => {
        // 关闭延迟框的显示
        Loading.hide();
        let response = result.data;
        _this.${domain}s = response.content.list;
        _this.$refs.pagination.render(page, response.content.total);
      })
    },

    // 当点击新增按钮时触发的事件
    add() {
      let _this = this;
      _this.${domain} = {};
      $("#form-modal").modal("show");
    },

    // 当点击编辑按钮时触发的事件
    edit(${domain}) {
      let _this = this;
      _this.${domain} = $.extend({}, ${domain});
      $("#form-modal").modal("show");
    },

    // 编辑和新增${tableNameCn}的调用方法
    save() {
      let _this = this;

      // 保存校验，加1!=1是为了解决第一个||符号的问题
      if (1 != 1
      <#list fieldList as field>
        <#if field.name != "id" && field.nameHump != "createdAt" && field.nameHump != "updatedAt" && field.nameHump != "sort">
          <#if !field.nullAble>
          || !Validator.require(_this.${domain}.${field.nameHump}, "${field.nameCn}")
          </#if>
          <#if (field.length > 0)>
          || !Validator.length(_this.${domain}.${field.nameHump}, "${field.nameCn}", 1, ${field.length?c})
          </#if>
        </#if>
      </#list>
      ) {
        return;
      }

      // 调用显示延迟框的方法
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/${module}/admin/${domain}/save', _this.${domain}).then((result) => {
        // 关闭延迟框的显示
        Loading.hide();
        // 用response来代替result.data
        let response = result.data;
        if (response.success) {
          $("#form-modal").modal("hide");
          _this.list(1);
          Toast.success("${tableNameCn}编辑成功！")
        } else {
          Toast.warning(response.message)
        }
      })
    },
    // 删除${tableNameCn}的调用方法
    del(id) {
      let _this = this;
      Confirm.show("删除${tableNameCn}后不可恢复，确认删除吗？", function () {
        // 调用显示延迟框的方法
        Loading.show();
        _this.$ajax.delete(process.env.VUE_APP_SERVER + '/${module}/admin/${domain}/delete/' + id).then((result) => {
          let response = result.data;
          // 当删除成功时
          if (response.success) {
            // 刷新列表
            _this.list(1);
            // 调用Toast组件的成功效果
            Toast.success("删除${tableNameCn}成功！")
          } // end if

        }) // end then
      })
    }

  } // methods
};
</script>

<style scoped>

</style>
